<template>
  <div id="main" :style="{ width: '100%', height: '85%', 'margin-top': '2%' }"></div>
<!--  <div class="corner-container">-->
<!--    <el-switch-->
<!--      v-model="choose"-->
<!--      class="ml-2"-->
<!--      inline-prompt-->
<!--      style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #32d792"-->
<!--      active-text="月"-->
<!--      inactive-text="年"-->
<!--      @change="handleChange"-->
<!--    />-->
<!--  </div>-->
<!--  <div v-if="choose" style="display: flex; justify-content: center; align-items: center; margin-top: 2%">-->
<!--    <el-pagination @current-change="handlemounthChange"-->
<!--     :current-page=newmounth :page-size=1-->
<!--      layout="total, prev, pager, next, jumper" :total="total">-->
<!--    </el-pagination>-->
<!--  </div>-->
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  DataZoomComponent,
  MarkLineComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  DataZoomComponent,
  MarkLineComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

export default {
  data() {
    return {
      newmounth: 0,
      choose: false,
      total: 12,
      alldata: [],
      end:30,
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    async getdata() {
      try {
        const response = await this.$http.get('/tu_biao/',{
          params:{
          'newmounth': this.newmounth,
          }
        });
        this.alldata = response.data;
        this.tubiao(); // 在获取数据后立即渲染
      } catch (error) {
        console.log(error);
      }
    },
    // handleChange() {
    //   if(this.choose === true){
    //     this.newmounth = 1
    //     this.getdata()
    //     this.end = 100
    //   }
    //   else{
    //     this.newmounth = 0
    //     this.getdata()
    //     this.end = 30
    //   }
    // },
        //监听改变的事件
    // handlemounthChange(newmounth){
    //   this.newmounth = newmounth;
    //   this.getdata();//带着新的分页请求获取数据
    // },
    tubiao() {
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      let data = this.alldata
      let option = {
        title: {
          text: '大话西游下载量',
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: data.map(function (item) {
            return item[0];
          })
        },
        yAxis: {},
        toolbox: {
          right: 50,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: '2023-08-01'
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 5000,
              color: '#93CE07'
            },
            {
              gt: 5000,
              lte: 10000,
              color: '#FBDB0F'
            },
            {
              gt: 10000,
              lte: 15000,
              color: '#FC7D02'
            },
            {
              gt: 15000,
              lte: 20000,
              color: '#FD0100'
            },
            {
              gt: 20000,
              lte: 30000,
              color: '#AA069F'
            },
            {
              gt: 30000,
              color: '#AC3B2A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: 'Beijing AQI',
          type: 'line',
          data: data.map(function (item) {
            return item[1];
          }),
          markLine: {
            silent: true,
            lineStyle: {
              color: '#333'
            },
            data: [
              {
                yAxis: 5000
              },
              {
                yAxis: 10000
              },
              {
                yAxis: 15000
              },
              {
                yAxis: 20000
              },
              {
                yAxis: 30000
              }
            ]
          }
        }
      };
      myChart.setOption(option);
      console.log(option.dataset.source);
    }
  },
};
</script>
<style scoped>
.corner-container {
  position: fixed;
  top: 10%; /* 距离顶部的距离，根据需要调整 */
  right: 10%; /* 距离右侧的距离，根据需要调整 */
}
</style>


